<template>
  <div id="c">
      <el-button class="exitBtn" @click="exitBtn">返回</el-button>
      <div class="title">
          <span>消费者详情</span>
      </div>
      <div>
          <el-descriptions class="margin-top" title="" :column="2" :size="size" border>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-user"></i>
                      用户名
                  </template>
                  {{user.nickname}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-goods"></i>
                      近30日提供服务次数
                  </template>
                  2
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      注册手机
                  </template>
                  {{user.phone}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-goods"></i>
                      近30日赚取佣金
                  </template>
                 123￥
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-s-data"></i>
                      用户ID
                  </template>
                  {{user.id}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-camera"></i>
                      提供服务项目数
                  </template>
                  2
              </el-descriptions-item>
          </el-descriptions>
      </div>
      <div>
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchValue">
          </el-input>
          <el-button type="primary" plain  @click="inquires(searchValue)">查询</el-button>
      </div>
      <div>
          <template>
              <el-table :data="showTableData" style="width: 100%" max-height="250">
                  <el-table-column fixed prop="id" label="订单编号">
                  </el-table-column>
                  <el-table-column label="项目名称">
                    <template slot-scope="scope">
                        <span> {{scope.row.projectList[0].name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="orderPrice" label="订单金额">
                  </el-table-column>
                  <el-table-column  label="订单状态">
                    <template slot-scope="scope">
                        <span> {{scope.row.projectList[0].state}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column  label="服务商家/美疗师">
                    <template slot-scope="scope">
                        <span> {{scope.row.projectList[0].beautician.nickname}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="paymentTime" label="创建时间">
                  </el-table-column>
                  <!-- <el-table-column fixed="right" label="操作">
                      <template>
                          <el-button type="danger" plain @click="deleteRow"></el-button>
                      </template>
                  </el-table-column> -->
              </el-table>
          </template>
      </div>
      <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5"
              layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
          </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  name: "ConsumerDetails",
  props: [],
  data() {
      return {
          user: {},
          searchValue: '',
          size: '',
          tableData:[],
         
        //   tableData: [{
        //       date: '2016-05-03',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }, {
        //       date: '2016-05-02',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }, {
        //       date: '2016-05-04',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }, {
        //       date: '2016-05-01',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }, {
        //       date: '2016-05-08',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }, {
        //       date: '2016-05-06',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }, {
        //       date: '2016-05-07',
        //       name: '王小虎',
        //       province: '上海',
        //       city: '普陀区',
        //       address: '上海市普陀区金沙江路 1518 弄',
        //       zip: 200333
        //   }],
          currentPage: 1,//放当前页
          pageSize: 5,//每页条数
      };
  },
  methods: {
      deleteRow() {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              });
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
      exitBtn() {
          this.$router.push('/home/user/consumer')
          console.log('点击了');
      },
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val
      },
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val
      },
       // 查询消费者对应id的详情
  getStus(){
    console.log(this.$route.params.row.id);
				this.$axios({
					url:"http://172.16.113.53:8088/order/getAllOrderDetails",
					method:'get',
                    params:{
                        id:this.$route.params.row.id
                    }
				}).then((res) => {
					console.log('获取所有消费者信息',res);
					if(res.code === 200){
						this.tableData = res.data;
					}else{
						this.$message({
							message: '服务器出错了',
							type: 'error'
						});
					}
				}).catch((err) => {
					console.log('获取消费者信息失败',err);
				})
  },
  // 搜索
  inquires(val){
    console.log(this.searchValue)
    this.searchValue = val //这里就是把input筐里的值赋给data里面的searchValue
    let data = this.searchValue
    console.log('搜索的值',data);
    this.$axios({
					url:"http://172.16.113.53:8088/order/selectOrderDetails",
					method:'get',
                    params:
                        {
                            id:data
                        }
				}).then((res) => {
					console.log('查询所有消费者信息',res);
					if(res.code === 200){
						// this.tableData = res.data;
					}else{
						this.$message({
							message: '服务器出错了',
							type: 'error'
						});
					}
				}).catch((err) => {
					console.log('查询消费者信息失败',err);
				})
  },
  },
  mounted() { 
    //   console.log('通过路由传递数据',this.$route.params.row);
      this.user = this.$route.params.row
    //   console.log('用户对象赋值数据',this.user);
   this.getStus()
  },
  computed: {
      showTableData() {
          let start = this.pageSize * (this.currentPage - 1)
          let end = start + this.pageSize
          let data = this.tableData.slice(start, end)
          return data
      },
  },
  created(){
    this.getStus()
  },
  watch: {
      // dataList: {
      //     handler:function(){
      //         console.log('dataList被更新了', this.$route.params.row);
      //     },
      //     deep: true,
      //     // immediate:true
      // }
  },
}
</script>

<style scoped>
.title {
  width: 70px;
  height: 20px;
  padding-left: 10px;
  border-left: 4px solid #0082cc;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-input {
  width: 300px;
  margin-right: 20px;
  margin: 20px 0 20px 758px;
}

.el-input__inner {
  width: 300px;
}

.exitBtn {
  margin-bottom: 20px;
}

.el-button--primary {
  margin-left: 20px;
}

.el-button--danger {
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
}

.block {
  position: absolute;
  bottom: 50px;
  left: 45%;
  margin-left: -40px;
}
</style>